<template>
  <header>
    <div>
      <!--<el-row :gutter="20">-->
      <!--  <el-col :span="4">-->
      <!--    <div class="grid-content bg-purple" style="padding-left:50px">-->
      <!--      <el-input v-model="input" placeholder="请输入关键词..." suffix-icon="iconfont icon-sousuo"></el-input>-->
      <!--    </div></el-col>-->
      <!--  <el-col :span="16">-->
      <!--    <div class="grid-content bg-purple">-->
      <!--      <el-avatar> user </el-avatar>-->

      <!--    </div>-->
      <!--  </el-col>-->
      <!--  <el-col :span="4">-->
      <!--    <div class="grid-content bg-purple">-->
      <!--      <el-avatar> user </el-avatar>-->
      <!--    </div>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple" style="padding-left:50px">
            <el-input v-model="input" placeholder="请输入关键词..." suffix-icon="iconfont icon-sousuo"></el-input>

          </div>
        </el-col>
        <el-col :span="3" :offset="15"><div class="grid-content bg-purple"><el-avatar> user </el-avatar></div></el-col>
      </el-row>

      <el-table :data="tableData" style="width: 600px;margin: 0 auto">
      <el-table-column label="ID" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
            <p>邮箱: {{ scope.row.email }}</p>
            <p>性别: {{ scope.row.isMale }}</p>
            <p>昵称: {{ scope.row.nickName }}</p>
            <p>手机号: {{ scope.row.phone }}</p>
            <p>头像：</p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  </header>

</template>

<script>
import {
  getList
} from "../js/getData.js";
export default {
  name: 'myList',
  data() {
    return {
      tableData: [{
        date: "2000-01-01",
        name: "大喵",
        address: "山东",
      },
        {
          date: "2000-01-01",
          name: "大喵",
          address: "山东",
        },
        {
          date: "2000-01-01",
          name: "大喵",
          address: "山东",
        },
        {
          date: "2000-01-01",
          name: "大喵",
          address: "山东",
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },

    async getMockList() {
      try {
        const result = await getList();
        console.log(result);
        if (result.data.code == 200) {
          this.tableData = result.data.data.data;
        }
        console.log(result.data.data.data);
      } catch (error) {
        console.log(error);
      }
    },
  },

  mounted() {
    this.getMockList();
  },

};
</script>

<style>
.td {
  vertical-align: middle;
  text-align: center;
}
</style>